<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sakihomura的博客</title>
    <!-- md样式文件 -->
    <link rel="stylesheet" href="./editor.md-master/css/editormd.preview.css" />
    <!-- 自带样式文件 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/showpage.css">
</head>

<body>
    <header>
        <nav class="wrap"><a href="index.html">导航页</a></nav>
    </header>
    <div class="wrap">
        <div class="content">
            <!-- 信息侧栏 -->
            <div class="my_info clearfix">
                <div class="aboutMe">
                    <img src="./img/userface.jpg" alt="更换头像" class="faces">
                    <div class="nickname">
                        <h3>折本 咲焰</h3>
                        <h4>Saki Homura</h4>
                        <ul class="link">
                            <li class="gitee">
                                <a href="https://gitee.com/SakiHomura">
                                    <svg t="1615299395341" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3626" width="20" height="20">
                                        <path
                                            d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"
                                            fill="#8a8a8a" p-id="3627">
                                        </path>
                                    </svg>
                                </a>
                            </li>
                            <li class="csdn">
                                <a href="https://blog.csdn.net/dongliang3164">
                                    <svg t="1615298954866" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2161" width="20" height="20">
                                        <path
                                            d="M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z"
                                            fill="#8a8a8a" p-id="2162">
                                        </path>
                                    </svg>
                                </a>
                            </li>
                            <li class="leetcode">
                                <a href="https://leetcode-cn.com/u/sakihomura/">
                                    <svg t="1615299459719" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3950" width="20" height="20">
                                        <path
                                            d="M686.969238 765.086476l-115.039501 111.200586c-19.877051 19.919706-47.389279 28.237356-77.759367 28.237357s-57.882315-8.31765-77.802021-28.237357l-184.779799-186.102093c-19.919706-19.919706-29.943541-49.052809-29.943541-79.465551s10.023835-57.882315 29.943541-77.80202l184.225289-186.827222c19.919706-19.919706 47.986444-27.512228 78.356531-27.512228s57.882315 8.31765 77.759367 28.237357l115.039501 111.157931c21.924473 21.967128 58.223552 21.199345 81.043772-1.620876 22.82022-22.862875 23.588003-59.161953 1.66353-81.086426l-111.285895-112.43757a215.619088 215.619088 0 0 0-104.290538-57.029222l105.228939-106.764506c22.009782-21.924473 21.241999-58.266206-1.578221-81.086426-22.82022-22.82022-59.161953-23.545348-81.129081-1.620876l-430.811629 430.854284c-41.844179 41.886834-63.725997 99.683839-63.725997 163.580455 0 63.896616 21.881818 123.485115 63.725997 165.28664l185.419619 186.016783c41.844179 41.75887 99.683839 61.934504 163.537801 61.934504s121.693622-21.839164 163.580455-63.725997l111.285895-112.480225c21.924473-21.924473 21.15669-58.223552-1.66353-81.043772s-59.119299-23.588003-81.001117-1.66353z m200.86059-209.860714H455.098741c-29.943541 0-54.171363 25.763389-54.171363 57.413114s24.227822 57.413114 54.171363 57.413114h432.731087c29.900886 0 54.171363-25.763389 54.171363-57.413114s-24.270477-57.413114-54.171363-57.413114z"
                                            p-id="3951" fill="#8a8a8a">
                                        </path>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="others">
                    <p class="sayings">永远不要只满足于世界的表象，要敢于探寻未知的可能。</p>
                    <h3>文章分类</h3>
                    <ul class="col_list">
                        <!-- <li data-id="1">JavaScript</li>
                        <li data-id="2">HTML</li> -->
                    </ul>
                </div>

                <div class="skills">
                    <h3>掌握技能</h3>
                    <ul>
                        <li>JavaScript</li>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Vue</li>
                        <li>计算机网络</li>
                        <li>数据结构</li>
                    </ul>
                </div>

                <p class="sayings_mini">
                    永远不要只满足于世界的表象，要敢于探寻未知的可能。
                </p>
            </div>
            <!-- 文章侧栏 -->
            <div class="artical_list">
                <ul>
                    <!-- <li data-id="1">
                        <h3>CSS background 属性</h3>
                        <p class="article_content">
                            实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background:
                            #00FF00 url(bgimage.gif) no-repeat left center
                            fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left
                            center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
                        </p>
                        <div class="author_info">
                            
                            <img src="./img/userface.jpg" alt="作者" class="author_face">
                            <span class="author_name">折本咲焰</span>
                            <span class="create_time">2021年03月09日</span>
                            <span class="article_class">CSS</span>
                        </div>
                    </li> -->
                    <!-- 头像地址修改 -->
                </ul>

                <!-- 页数 -->
                <div class="page_control">
                    <select class="num_every_page">
                        <option value="5">&nbsp;5条/页</option>
                        <option value="10">10条/页</option>
                        <option value="20">20条/页</option>
                    </select>
                    <a href="javascript:;" class="previous_page_btn"></a>
                    <a href="javascript:;" class="next_page_btn"></a>
                    <span class="page_input">
                        前往
                        <input type="text" value="1">
                        页
                        <button class="page_confirm_btn">确定</button>
                    </span>
                </div>
            </div>
            <!-- 文章详情 -->
            <article>
                <!-- <h1 class="title">尴尬！OpenAI惊现大漏洞，一张手写纸条竟瞒过计算机视觉系统</h1>
                <a href="javascript:;" class="show_main">返回首页</a>
                <section>
                    <span class="author">折本咲焰</span>
                    <span class="create_time">2021-03-10 18:01:30</span>
                    <span class="arti_class">JavaScript</span>
                </section>
                <div id="mdView">
                    <textarea id="mdTextarea" style="display:none;"></textarea>
                </div> -->
            </article>
            <!-- 分类文章 -->
            <div class="col_artical_list">
                <nav>
                    <h3></h3>
                    <em class="arti_count"></em>
                    <a href="javascript:;" class="show_main">返回文章列表页</a>
                </nav>
                <ul class="col_artical_ul">
                    <li data-id="1">
                        <h3>CSS background 属性</h3>
                        <p class="article_content">
                        </p>
                        <div class="author_info">
                            <img src="./img/userface.jpg" alt="作者" class="author_face">
                            <span class="author_name">折本咲焰</span>
                            <span class="create_time">2021年03月09日</span>
                            <span class="article_class">CSS</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <footer>
        <div class="copyright">
            <a href="#">SakiHomura.com</a>
            <span>折本咲焰 版权所有</span>
        </div>
        <div class="registration">
            <a href="https://beian.miit.gov.cn/#/Integrated/index">桂ICP备2020007041号</a>
        </div>
    </footer>
    <script src="./js/util.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/showpage.js"></script>

    <!-- md JS文件 最后请求 -->
    <script src="./editor.md-master/examples/js/jquery.min.js"></script>
    <script defer src="./editor.md-master/lib/prettify.min.js"></script>
    <script src="./editor.md-master/lib/marked.min.js"></script>
    <script src="./editor.md-master/editormd.js"></script>
</body>

</html>